import React, { useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import {
  LoginWrapper, LoginBox, Input, Button,
} from './style';
import * as actionCreators from './store/actionCreators';

const Login = () => {
  const dispatch = useDispatch();
  const loginStatus = useSelector((state:any) => state.getIn(['login', 'login']));
  const [accountValue, setAccountValue] = useState('');
  const [passwordValue, setPasswordValue] = useState('');
  const handleLogin = () => {
    dispatch(actionCreators.handleChangeLoginStatus(!loginStatus));
  };
  return (
    <>
      <LoginWrapper>
        <LoginBox>
          <Input value={accountValue} onChange={(e) => setAccountValue(e.target.value)} placeholder="账号" />
          <Input value={passwordValue} onChange={(e) => setPasswordValue(e.target.value)} placeholder="密码" />
          <Button onClick={handleLogin}>登录</Button>
        </LoginBox>
      </LoginWrapper>
    </>
  );
};

export default Login;
